<template>
  <el-card class="box-card">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="更换头像" name="first">
        <el-row style="margin-top: 20px">
          头像: <UploadImg ref="uploadImg" />
        </el-row>
        <el-row class="lastRow">
          <el-button type="primary" v-onceClick="10000" plain @click="send">更换</el-button>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import { Token } from "@/store";
import { changeUserPic} from "@/api";
import { ElMessage } from "element-plus";
import UploadImg from "@/views/userCenter/changeUserPic/uploadImg";

export default {
  name: "UIndex",
  components: {UploadImg},
  setup(){
    let activeName = ref('first')
    let store = Token()
    let form = reactive({
      avatar: ''
    })
    const uploadImg = ref(null);


    let send = async() => {
      form.avatar = uploadImg.value.imageUrl
      const res = await changeUserPic(form)
      await store.saveInfo()
      ElMessage.success(res.message)
    }


    onMounted(async () => {
      await store.saveInfo()
      uploadImg.value.imageUrl = store.userInfo.data.user_pic
    })

    return{
      activeName,
      store,
      form,
      send,
      uploadImg
    }
  }
}
</script>

<style>
img{
  width: 200px;
  height: 200px;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  margin-left: 20px;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.lastRow{
  margin-top: 20px;
  margin-left: 100px;
}
</style>
